<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
    -->
    <div id="demo">
        <h2>{{n}}</h2>
        <h2 v-big="n">{{n}}</h2>
        <button @click="n++">点击</button>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            n:1
        },
        directives:{
            big(element,binding){//形参
                //big函数何时会被调用，1.指令与元素成功绑定时（一上来）
                //2.指令所在的模板被重新解析时
                element.innerText = binding.value *10
            }
        }
    })
    </script>
</body>
</html>